About Engine Hosting
Engine Hosting – new unique, modern, fully responsive HTML theme, based on Bootstrap 3.3.6 created using HTML and CSS3.
Can be used for charitable organizations and organizations for the protection of nature.
Installation
Important!
In order to get JS loading data you need to install localhost server or your computer must have internet access. To install the localhost server You can use WAMP. Then you need to:
- Copy your files into
*wamp/www - Run WAMP. This will start your localhost server.
- Open browser and in URL type
localhost/enginehosting(or other path)
Folder Structure
- Engine Hosting
- HTML Files
- assets
- css - CSS style sheets
- fonts - Font Awesome font
- img - Images
- js - JS script files
- documentation - This documentation
Slidertop
<div class="base-slider owl-carousel owl-theme bg-gray">
<div class="item">
<img src="assets/images/bg-test.png" alt="slider">
<div class="inside">
<h2>Best Web Hosting For Your Website</h2>
<p>get best speed for your website. dont loose more clients.</p>
<a href="service-page.html" class="custom-btn">Get Started Now</a>
</div><!--inside-->
</div>
<div class="item">
<img src="assets/images/bg-test.png" alt="slider">
<div class="inside">
<h2>Best Web Hosting For Your Website</h2>
<p>get best speed for your website. dont loose more clients.</p>
<a href="service-page.html" class="custom-btn">Get Started Now</a>
</div><!--inside-->
</div>
</div>
Js code located at file dist/assets/js/main.js:
$('.base-slider').owlCarousel({
loop: true,
margin: 0,
nav: true,
navText: ["<img src='assets/images/arrow-left.png'>","<img src='assets/images/arrow-right.png'>"],
dots: false,
item: 1,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
Header and Footertop
Example for header:
HTML:
<header>
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="logo"><a href="index.html"><img src="assets/images/logo.svg" alt="logo"></a></div>
</div>
<div class="col-md-7">
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li class="children">
<span class="menu-item" href="#">Hosting</a>
<ul class="sub-menu">
<li><a href="service-page.html">Service page 1</a></li>
<li><a href="service-page-light.html">Service page 2</a></li>
<li><a href="service-page-dark.html">Service page 3</a></li>
<li><a href="service-page-images.html">Service page 4</a></li>
</ul><!--sub-menu-->
</li><!--children-->
<li class="children">
<a href="user-interface.html">Pages</a>
<ul class="sub-menu">
<li><a href="404.html">404 Page</a></li>
<li><a href="order.html">Order</a></li>
<li><a href="user-interface.html">User Interface</a></li>
</ul><!--sub-menu-->
</li>
<li><a href="blog-list.html">Blog</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="col-md-3">
<div class="button-header">
<a href="login.html" class="custom-btn login">Login</a>
<a href="sign-up.html" class="custom-btn">Sign Up</a>
</div>
</div>
</div>
</div>
</header>
Example for footer:
HTML:
<footer>
<div class="container">
<div class="widget-footer">
<h4>Product</h4>
<ul>
<li><a href="service-page.html">Web Hosting</a></li>
<li><a href="service-page.html">Shared Hosting</a></li>
<li><a href="service-page.html">Dedicated Server</a></li>
<li><a href="service-page.html">Private Cloud</a></li>
</ul>
</div><!--widget-footer-->
<div class="widget-footer">
<h4>Company</h4>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="service-page.html">Careers</a></li>
<li><a href="blog-list.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--widget-footer-->
<div class="widget-footer">
<h4>Support</h4>
<ul>
<li><a href="service-page.html">FAQ</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div><!--widget-footer-->
<div class="widget-footer">
<h4>Contact Us</h4>
<ul>
<li><span class="menu-item" href="#">+123-333-123</a></li>
<li><span class="menu-item" href="#">support@enginehosting.com</a></li>
</ul>
</div><!--widget-footer-->
<div class="widget-footer last">
<a href="index.html"><img src="assets/images/logo.svg" alt="logo"></a>
<p>There are many variations of passages of Lorem Ipsum </p>
<ul class="social-icon">
<li><span class="menu-item" href="#"><i class="fa fa-facebook"></i></a></li>
<li><span class="menu-item" href="#"><i class="fa fa-instagram"></i></a></li>
<li><span class="menu-item" href="#"><i class="fa fa-youtube"></i></a></li>
</ul>
</div><!--widget-footer-->
<div class="copyright">
<p>© Copyright 2017 Hosting, All Rights Reserved</p>
</div><!--copyright-->
</div>
</footer>
Variant of colorstop
If you need a light version of the site then connect dist/assets/css/light.css the file in <head>
Owl carouseltop
HTML head
<link rel="stylesheet" href="dist/assets/css/lib/owl.carousel.min.css">
HTML:
<div class="partner-slider owl-carousel owl-theme">
<div class="item animated bounceInLeft delay-250"><span class="menu-item" href="#"><img src="" alt="partner"></a></div>
<div class="item animated bounceInLeft delay-500"><span class="menu-item" href="#"><img src="" alt="partner"></a></div>
<div class="item animated bounceInLeft delay-750"><span class="menu-item" href="#"><img src="" alt="partner"></a></div>
<div class="item animated bounceInLeft delay-1000"><span class="menu-item" href="#"><img src="" alt="partner"></a></div>
<div class="item animated bounceInLeft delay-1250"><span class="menu-item" href="#"><img src="" alt="partner"></a></div>
</div>
Before </body> tag ends:
<script src="dist/assets/js/lib/owl.carousel.min.js"></script>
<script src="dist/assets/js/main.js"></script>
Js code located at file assets/js/myScript.js:
$('.partner-slider').owlCarousel({
loop: true,
margin: 0,
nav: false,
autoplay: true,
dots: false,
item: 5,
responsive:{
0:{
items:2
},
600:{
items:3
},
1000:{
items:5
}
}
});
Owl-carousel settings can be found here
Pricing Listtop
HTML:
<div class="pricing-table">
<div class="container">
<h2 class="title-head">Linux Reseller Hosting</h2>
<p>High Performance cPanel WHM Reseller Hosting in Europe</p>
<ul class="pricing-list">
<li>
<div class="images"><img src="assets/images/server.svg" alt="server"></div>
<h5>Dedicated Server</h5>
<p>There are many variations of passages of Lorem Ipsum available.</p>
<span><b>From</b></span>
<div class="price">80$<span>/month</span></div>
<a href="service-page.html" class="custom-btn">Get Started Now</a>
</li>
<li>
<div class="images"><img src="assets/images/hosting.svg" alt="hosting"></div>
<h5>Reseller Hosting</h5>
<p>There are many variations of passages of Lorem Ipsum available.</p>
<span><b>From</b></span>
<div class="price">160$<span>/month</span></div>
<a href="service-page.html" class="custom-btn">Get Started Now</a>
</li>
<li>
<div class="images"><img src="assets/images/hosting2.svg" alt="hosting2"></div>
<h5>Shared Hosting</h5>
<p>There are many variations of passages of Lorem Ipsum available.</p>
<span><b>From</b></span>
<div class="price">9$<span>/month</span></div>
<a href="service-page.html" class="custom-btn">Get Started Now</a>
</li>
<li>
<div class="images"><img src="assets/images/vps.svg" alt="vpn"></div>
<h5>VPS Hosting</h5>
<p>There are many variations of passages of Lorem Ipsum available.</p>
<span><b>From</b></span>
<div class="price">82$<span>/month</span></div>
<a href="service-page.html" class="custom-btn">Get Started Now</a>
</li>
</ul>
</div>
</div>
Tabletop
HTML:
<table>
<thead>
<tr>
<td class="text-left">Features</td>
<td>Basic</td>
<td>Premium</td>
<td>Reseller</td>
</tr>
</thead>
<tr>
<td class="text-left background">RAM</td>
<td class="background">8 GB</td>
<td class="background">12 GB</td>
<td class="background">24 GB</td>
</tr>
<tr>
<td class="text-left">Storage SSD</td>
<td>25 GB</td>
<td>55 GB</td>
<td>100 GB</td>
</tr>
<tr>
<td class="text-left background">SAS Storage</td>
<td class="background">50 GB</td>
<td class="background">132 GB</td>
<td class="background">200 GB</td>
</tr>
<tr>
<td class="text-left">CPU Cores</td>
<td>2</td>
<td>4</td>
<td>16</td>
</tr>
<tr>
<td class="text-left background">Brandwidth</td>
<td class="background">2 TB</td>
<td class="background">8 TB</td>
<td class="background">12 TB</td>
</tr>
<tr class="offset-inside">
<td class="text-left"><b>Available OS</b></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="text-left background">Ubuntu</td>
<td class="background"><img src="assets/images/done.png" alt="done"></td>
<td class="background"><img src="assets/images/done.png" alt="done"></td>
<td class="background"><img src="assets/images/done.png" alt="done"></td>
</tr>
<tr>
<td class="text-left">Windows Server 2008</td>
<td><img src="assets/images/done.png" alt="done"></td>
<td><img src="assets/images/done.png" alt="done"></td>
<td><img src="assets/images/done.png" alt="done"></td>
</tr>
<tr class="offset-inside">
<td class="text-left"><b>Support</b></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="text-left background">Phone Support</td>
<td class="background">-</td>
<td class="background"><img src="assets/images/done.png" alt="done"></td>
<td class="background"><img src="assets/images/done.png" alt="done"></td>
</tr>
<tr>
<td class="text-left">Live Chat</td>
<td><img src="assets/images/done.png" alt="done"></td>
<td><img src="assets/images/done.png" alt="done"></td>
<td><img src="assets/images/done.png" alt="done"></td>
</tr>
<tr class="offset-inside">
<td class="text-left"><b>More Features</b></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="text-left background">Some Feature 1</td>
<td class="background">100 Mbps</td>
<td class="background">100 Mbps</td>
<td class="background">100 Mbps</td>
</tr>
<tr>
<td class="text-left">Some Feature 2</td>
<td>-</td>
<td>-</td>
<td><img src="assets/images/done.png" alt="done"></td>
</tr>
<tr class="offset-inside">
<td class="text-left"><b>Price</b></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="text-left background">Monthly</td>
<td class="background">80$/Month</td>
<td class="background">80$/Month</td>
<td class="background">80$/Month</td>
</tr>
<tr>
<td class="text-left">Yearly</td>
<td>50$/Month</td>
<td>50$/Month</td>
<td>50$/Month</td>
</tr>
</table>
Contact Iconstop
HTML:
<div class="bg-form">
<div class="container">
<h2 class="text-center">Contact Us</h2>
<p class="text-center">We’re here to help.</p>
<div class="info-block-contact">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="inside left">
<div class="images"><img src="assets/images/phone.png" alt="phone"></div>
<h4>Have questions? Call Us.</h4>
<span class="menu-item" href="#">+1 888 231 1211</a>
</div><!--inside-->
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="inside right">
<div class="images"><img src="assets/images/mail.svg" alt="mail"></div>
<h4>Email Us</h4>
<span class="menu-item" href="#">hello@enginehosting.com</a>
</div><!--inside-->
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="inside left">
<div class="images"><img src="assets/images/address.svg" alt="address"></div>
<h4>Address</h4>
<span>514 S. Magnolia St.<br>Orlando, FL 32806</span>
</div><!--inside-->
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="inside right">
<div class="images"><img src="assets/images/like.svg" alt="like"></div>
<h4>Follow Us</h4>
<ul class="social-icon">
<li><span class="menu-item" href="#"><i class="fa fa-facebook"></i></a></li>
<li><span class="menu-item" href="#"><i class="fa fa-instagram"></i></a></li>
<li><span class="menu-item" href="#"><i class="fa fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Video Pop Uptop
HTML:
<div class="video">
<img src="assets/images/video.jpg" alt="video">
<button data-toggle="modal" data-target=".bs-example-modal-lg"><img src="" alt="play"></button>
<div class="modal fade bs-example-modal-lg" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<iframe height="490" src="https://www.youtube-nocookie.com/embed/rx5zCr7452I"></iframe>
</div>
</div>
</div>
</div>
Sources and Creditstop
- Web design - Fruitful code
- Bootstrap Framework – http://getbootstrap.com
- jQuery - http://code.jquery.com/jquery-2.1.1.js
- OwlCarousel - https://owlcarousel2.github.io/OwlCarousel2
- Animations - http://jackonthe.net/css3animateit/examples/
- Icons Font Awesome
- Counter https://codepen.io/kevincote/pen/RLaQoZ?q=Counter+on+Scroll&limit=all&type=type-pens
Fruitful code
Contacts
back to top
Created: 15/01/2018
By: Fruitful code
Email: mail@fruitfulcode.com
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!